<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="心理科普详情">
				<view slot="center" class="navTitle">
					心理科普详情
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="articleDetail">
						<view class="h1">
							{{info.title}}
						</view>
						<view class="sub">
							<text>{{info.publishDate}}</text>
							<text class="gap">|</text>
							<text>来源：{{info.resource || ''}}</text>
						</view>
						<!-- <view class="content">
							<rich-text :nodes="info.content"></rich-text>
						</view> -->
						<view class="video">
							<view class="v" v-if="info.video">
								<video :src="info.video" :poster="info.image" controls></video>
							</view>
							<view class="img" v-if="!info.video&&info.image">
								<image :src="info.image" mode="widthFix"></image>
							</view>
						</view>
						<view class="content">
							<u-parse :content="info.content"></u-parse>
						</view>
						<view class="auth">
							<view v-if="info.auth">
								作者：{{info.auth}}
							</view>
							<view>
								浏览次数：{{info.hitCount||0}}次
							</view>
						</view>
						<view class="prevcontent">
							<view class="p">
								<view class="lb">
									上一篇
								</view>
								<view class="lp">
									<view v-if="info.previousArticle.id">
										<navigator class="a" :url="'/subpage/article/detail?id='+info.prev.id">{{info.prev.title}}</navigator>
									</view>
									<view class="null" v-else>
										无
									</view>
								</view>
							</view>
							<view class="p">
								<view class="lb">
									下一篇
								</view>
								<view class="lp">
									<view v-if="info.nextArticle.id">
										<navigator class="a" :url="'/subpage/article/detail?id='+info.next.id">{{info.next.title}}</navigator>
									</view>
									<view class="null" v-else>
										无
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		methods: {
				getInfo(id) {
					this.$api.articleInfo({
						id
					}, res => {
						if (res.code == 200) {
							this.info = res.data
						}
					})
				},
				
		},
		onLoad(e) {
				this.getInfo(e.id);
		}
	}
</script>

<style lang="scss" scoped>
	.articleDetail{
		.h1{
			font-size: 48rpx;
			font-weight: bold;
			line-height: 1.3;
			color: #65554d;
			margin-bottom: 20rpx;
		}
		.sub{
			font-size: 22rpx;
			color: #999;
			margin-bottom: 40rpx;
			.gap{
				padding: 0 1em;
			}
		}
		.content{
			font-size: 28rpx;
			color: #897f7a;
			line-height: 1.3;
			strong,b{
				color: #65554d;
			}
		}
		.video{
			border-radius: 30rpx;
			overflow: hidden;
			margin: 30rpx 40rpx;
			image{
				display: block;
				width: 100%;
				height: auto;
			}
			video{
				display: block;
				width: 100%;
				height: auto;
			}
		}
		.auth{
			margin-top: 40rpx;
			font-size: 24rpx;
			color: #65554d;
			line-height: 1.8;
		}
		.prevcontent{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-top: 40rpx;
			padding-top: 40rpx;
			border-top: 1rpx solid #e5e3dd;
			font-size: 28rpx;
			line-height: 1.8;
			.p{
				flex: 0 0 auto;
				width: 47%;
				.lb{
					color: #999;
				}
				.a{
					color: #65554d;
				}
				&:nth-child(2){
					text-align: right;
				}
			}
		}
	}
</style>